<template>
  <div class="main">
    <div class="box" ref="box" v-for="n in count" :key="n"></div>
  </div>
</template>

<script>
import {gsap} from "gsap";

export default {
  name: "LhzC",
  data() {
    return {
      count: 170
    }
  },
  mounted() {
    let box = this.$refs['box'];
    gsap.to(box, {
      scale: 0.1,
      y: 60,
      yoyo: true, // 如果为 true，则每隔一次重复补间将朝相反的方向运行。（像溜溜球一样）默认值：假
      repeat: -1,
      delay: 1,
      // 每个目标的动画开始之间的时间（以秒为单位）（如果提供了多个目标）
      stagger:{
        amount: 1.5,
        grid: "auto",
        from: "center"
      }
    });
  }
}
</script>

<style scoped>
.main {
  max-width: 1200px;
  height: 100%;
  position: relative;
  display: inline-block;
}

.box {
  width: 50px;
  height: 50px;
  position: relative;
  border-radius: 0px;
  margin-top: 4px;
  display: inline-block;
  margin: 0px 1.5% 1.5% 0px;
  background-color: #6fb936;
}
</style>